<template>
  <div class="search">
    <!-- 顶部导航 -->
    <mt-header class="mytitle" title="搜索中心">
      <div slot="left">
        <mt-button icon="back" @click="$router.go(-1)"></mt-button>
      </div>
    </mt-header>
    <div class="body">
      <!-- search -->
      <div class="searchInfo">
        <input type="text" placeholder="搜索你喜欢的商品" v-model="searchData" @keydown.enter="searchListBtn">
        <button class="search_btn" @click="searchListBtn">搜索</button>
      </div>
      <!-- 查询功能 -->
      <nav class="search_function">
        <ul>
          <li @click="SearchChange(index)" v-for="(item,index) in navFunctionList" :key="index" :class="navId===index ? 'active' : ''">
            <span>{{item.name}}</span>
            <i v-if="item.isVisible" class="iconfont icon-unfold"></i>
            <i v-else class="iconfont icon-packup"></i>
          </li>
        </ul>
      </nav>
      <!-- 商品列表 -->
      <div class="product_list">
          <ul class="content">
            <li v-if="searchList.length===0">
              <span>暂无商品</span>
            </li>
            <li v-else v-for="(item,index) in searchList" :key="index">
              <img :src='`http://localhost:3000${item.pic[0].picAddr}`' alt="">
              <div class="attr">
                <div class="product_title">{{item.proName}}</div>
                <div class="price">
                  <span class="new_price">¥{{item.price}}</span>
                  <del class="old_price">¥{{item.oldPrice}}</del>
                </div>
              </div>
              <mt-button class="buy-btn" type="primary" size="small">立即购买</mt-button>
            </li>
          </ul>
        </div>
    </div>
    <!-- 底部导航 -->
    <tab-bar></tab-bar>
  </div>
</template>
<script>
import {quertGoods} from '@/api'
import { Toast } from 'mint-ui'
import TabBar from '@/components/tab-bar'
export default {
  components: {
    TabBar
  },
  created () {
    this.renderLocalList()
  },
  data () {
    return {
      navId: -1, // 控制字体颜色的id
      isVisible: true, // 控制功能栏的样式
      // 传参对象需要的关键词
      searchData: '',
      historyList: [],
      // 请求传参需要的对象
      queryInfo: {
        proName: '',
        page: 1,
        pageSize: 10
      },
      searchList: [], // 渲染商品需要的数组
      // 控制查询功能的样式
      navFunctionList: [
        {
          id: 0,
          name: '上架时间',
          isVisible: true
        },
        {
          id: 1,
          name: '价格',
          isVisible: true
        },
        {
          id: 2,
          name: '销量',
          isVisible: true
        },
        {
          id: 3,
          name: '折扣',
          isVisible: true
        }
      ]
    }
  },
  methods: {
    // 点击搜索按钮
    searchListBtn () {
      if (!this.searchData) {
        Toast({
          message: '请输入关键词',
          duration: 1500
        })
      } else {
        // 把local中的搜索历史数组取出来
        let foundList = JSON.parse(localStorage.getItem('historyList'))
        // 如果找不到fondList,就创建一个空的数组
        if (!foundList) {
        // 把当前搜索的关键词追加到local中
          this.historyList.unshift(this.searchData)
          // 把添加新关键词的数组存入local中
          localStorage.setItem('historyList', JSON.stringify(this.historyList))
        } else {
          this.historyList = JSON.parse(localStorage.getItem('historyList'))
          this.historyList.unshift(this.searchData)
          // 把添加新关键词的数组存入local中
          localStorage.setItem('historyList', JSON.stringify(this.historyList))
        }
        // 发送搜索请求 => 把存好的对象直接放到请求条件里
        this.renderList()
      }
    },
    renderLocalList () {
      // 把local中的搜索列表赋值给data中的searchList变量 用来渲染页面
      let list = JSON.parse(localStorage.getItem('searchList'))
      this.searchList = list
    },
    renderList () {
      // 把当前搜索的关键词赋值给发请求需要的对象(产品名称)中
      this.queryInfo.proName = this.searchData
      quertGoods(this.queryInfo)
        .then(res => {
          // 先把上次搜索的列表清空
          this.searchList = []
          // 把local中保存的数据清除，防止数据重叠
          localStorage.setItem('searchList', [])
          // 把本次搜索到的数据赋值给searchList数组用来渲染页面
          this.searchList = res.data
          console.log(this.searchList)
        })
    },
    // 控制上架时间的功能
    SearchChange (id) {
      let navList = this.navFunctionList
      navList.map((res, index) => {
        if (id === index) {
          this.isVisible = !this.isVisible
          res.isVisible = this.isVisible
          this.navId = id
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
  .search{
    .mytitle{
      position: fixed;
      top: 0;
      left: 0;
      z-index: 1;
      width: 100%;
      height: 45px;
      background-color: #006699;
      color: #fff;
      font-size: 16px;
      ::before{
        font-weight: 600;
        font-size: 20px
      }
    }
    .body{
      padding: 45px 0  50px 0;
      .searchInfo{
        padding: 10px;
        input{
          height: 28px;
          width: 275px;
          border: 1px solid #006699;
          padding-left: 10px;
          border-top-left-radius: 10px;
          border-bottom-left-radius: 10px;
          outline:none;
        }
        .search_btn{
          background: #006699;
          color: #fff;
          padding: 8px 20px;
          border-top-right-radius: 10px;
          border-bottom-right-radius: 10px;
          border: none;
          margin-left: -12px;
          outline: none;
          font-size: 14px;
        }
      }
      .search_function{
          ul{
            background-color: rgb(240, 240, 240);
            margin: 0;
            padding: 0;
            list-style: none;
            display: flex;
            li{
              flex: 1;
              font-size: 12px;
              text-align: center;
              padding: 9px 0;
              i{
                margin-left: -3px;
                font-size: 10px;
              }
            }
            .active{
              color: red
            }
          }
      }
      .product_list{
        .content{
          padding: 0 10px;
          list-style: none;
          display: flex;
          justify-content: space-between;
          flex-wrap: wrap;
          >li{
            margin-top: 10px;
            box-shadow: 0 0 5px #ccc;
            width: 48%;
            padding: 5px 0;
            text-align: center;
            img{
              width: 100%;
              height: 60%;
            }
            .attr{
              padding: 10px;
              font-size: 13px;
              .product_title{
                color: #999;
                font-size: 14px;
                height: 35px;
                line-height: 18px;
                overflow: hidden;
              }
              .new_price{
                color: red;
                font-weight: 600
              }
            .old_price{
              color: #aaa
            }
          }
        }
      }
    }
  }
}
</style>
